<template>
  <!--
   * @FileDescription: 人员分类 圆形图
   * @author Sun Yan
   * @Date $
  -->
  <module-card-title style="width: 100%; height:240px;" class="personnel-classfiy-container">
    <div ref="chart" style="width: 100%; height:240px;"></div>
  </module-card-title>
</template>
<script>
import {throttle} from "../../util";

/**
 * @description: 方法描述
 * @param {参数类型} 参数名称
 * @param {参数类型} 参数名称
 * @return void
 */
export default {
  name: "personnel-classfiy",
  data() {
    return {
      cuisineEcharts: null,
    }
  },

  props: {
    options: {
      type: Object,
      default: function () {
        return {
          tooltip: {
            extraCssText: 'z-index: 2',

            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)',
            right: '0%',
            top: '0%',
          },
          grid: {
            show: true,
            top: 10,
            bottom: 10,
            left: 10,
            right: 10,
            borderWidth: 0
          },
          series: [
            {
              name: '数据',
              type: 'pie',
              top: 20,
              radius: ['60%', '70%'],
              // roseType: 'radius',
              avoidLabelOverlap: false,
              label: {
                // show: false,
                fontSize: 16
              },

              labelLine: {
                // showAbove: false,
              },

              itemStyle: {
                borderRadius: 10,
                borderColor: 'rgb(4, 16, 23)',
                borderWidth: 2
              },
              //Food_Carbohydrate  碳水  Food_Fat  脂肪   Food_Protein 蛋白质   Food_Hot  热量
              data: [
                {
                  value: 4,
                  name: '交换生',
                  itemStyle: {
                    color: '#61AFFF',
                  },
                },
                {
                  value: 5,
                  name: '北里莫',
                  itemStyle: {
                    color: '#007aff'
                  }
                },
                {
                  value: 12,
                  name: 'tutor',
                  itemStyle: {
                    color: '#61AFFF'
                  }
                },
                {
                  value: 22,
                  name: '教职工',
                  itemStyle: {
                    color: '#FFAB33'
                  }
                },
                {
                  value: 1,
                  name: '教职工',
                  itemStyle: {
                    color: '#FFAB33'
                  }
                },
                {
                  value: 4,
                  name: '其他',
                  itemStyle: {
                    color: '#63DDAF'
                  }
                },
                {
                  value: 12,
                  name: '舍监',
                  itemStyle: {
                    color: '#63DDAF'
                  }
                },
              ]
            }
          ]
        }
      }
    }
  },

  watch: {
    option: {
      immediate: true,
      handler: function () {
        this.$nextTick(_ => this.setEchartData());
      }
    },
  },

  created() {
    window.addEventListener("resize", this.mianResize)
  },

  methods: {
    //echart options 数据 完毕调用
    setEchartData() {
      this.$nextTick(_ => {
        const chart = this.$refs.chart || {};
        if (this.cuisineEcharts === null) {
          this.cuisineEcharts = echarts.init(chart)
          this.cuisineEcharts.setOption(this.options)
        } else {
          this.cuisineEcharts.clear();
          this.cuisineEcharts.setOption(this.options);
        }
      })
    },

    mianResize: throttle(function () {
      this.$nextTick(_ => {
        const $el = this.$refs.chart || {};
        if ($el.clientHeight === undefined || $el.clientWidth === undefined) return;
        this.cuisineEcharts && this.cuisineEcharts.resize({
          height: `${$el.clientHeight}px`,
          width: `${$el.clientWidth}px`
        });
      })
    }),


  }
}
</script>

<style scoped>

</style>